<template>
    <div v-loading="loading">
        <el-card body-style="padding:10px" class="box-card">
            <el-input clearable placeholder="请输入内容" size="small" style="width: 200px;" v-model="query.keyword"></el-input>
            <!-- 根据type选择 -->
            <el-select v-model="query.type" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>

            <el-button @click="page=1;init()" size="small" type="primary" style="margin-left: 30px;">搜索</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>


        <!-- 展示图片大图 -->
        <el-dialog title="反馈图片" :visible.sync="visible">
            <div class="flex">
                <img v-for="(item, index) in images" :src="item" :key="index" alt=""
                    style="width: 300px;margin-right: 15px;">
            </div>
        </el-dialog>
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="550px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>

                <el-table-column label="用户ID" prop="uid">
                                    
                    <template slot-scope="scope">
                        <UserInfo :user_id="scope.row.uid" v-if="scope.row.uid"></UserInfo>
                    </template>
                </el-table-column>
                <el-table-column label="类型" prop="type">

                    <template slot-scope="scope">
                        <div v-if="scope.row.type == 'recharge'">充值</div>
                        <div v-else-if="scope.row.type == 'rebate'">返利</div>
                        <div v-else-if="scope.row.type == 'reward'">收益</div>
                        <div v-else-if="scope.row.type == 'one_by_one'">1v1密聊</div>
                        <div v-else-if="scope.row.type == 'same_city'">同城空降</div>
                        <div v-else-if="scope.row.type == 'customized'">私人订制</div>
                        <div v-else>其他</div>
                    </template>
                </el-table-column>
                <el-table-column label="反馈内容" prop="content"></el-table-column>

                <el-table-column label="反馈图片" prop="images">
                    <template slot-scope="scope">
                        <div @click="imagesFun(scope.row.images)">
                            <el-avatar shape="square" :size="50" :src="scope.row.images[0]"></el-avatar>
                        </div>
                    </template>

                </el-table-column>
                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
            </el-table>
        </el-card>
        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
export default {
    name:"problem-feedback-list",
    mixins: [initData],
    components: {
        treeSelect,
        medium
    },
    data() {
        return {
            query: {
                keyword: "",
                type: ""
            },
            value: '',
            options: [
                {
                    value: 'recharge',
                    label: '充值'
                }, {
                    value: 'rebate',
                    label: '返利'
                }, {
                    value: 'reward',
                    label: '收益'
                }, {
                    value: 'one_by_one',
                    label: '1v1密聊'
                }, {
                    value: 'same_city',
                    label: '同城空降'
                },
                {
                    value: 'customized',
                    label: '私人订制'
                }
            ],

            visible: false,
            loading: false,
            images: [],
        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()
    },
    methods: {
        beforeInit() {
            this.url = '/user-question/index'
            this.init() //重新请求数据
        },

        // del(id) {
        //     this.$request.del('/label/delete/' + id).then((res) => {
        //         this.$message.success('删除成功')
        //         this.init() //重新请求数据

        //     })
        // },

        imagesFun(images) {
            this.visible = true
            this.images = images
            console.log(images)
        },
        closeBox() {
            this.type = 'create'
            this.visible = false

        },



    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}

.flex {
    display: flex;
}
</style>